'use strict';

import React, {Component} from 'react';
import {StyleSheet, View, Image} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Home from '../page/homeIndex/Home'
import Discover from '../page/homeIndex/Discover'
import Order from '../page/homeIndex/Order'
import My from '../page/homeIndex/My'

const dataSource = [
    {
        icon: require('../icon/home.png'),
        selectedIcon: require('../icon/home_fill.png'),
        tabPage: 'Home',
        tabName: '外卖',
        component: Home
    },
    {
        icon: require('../icon/find.png'),
        selectedIcon: require('../icon/find_fill.png'),
        tabPage: 'Discover',
        tabName: '搜索',
        component: Discover
    },
    {
        icon: require('../icon/order.png'),
        selectedIcon: require('../icon/order_fill.png'),
        tabPage: 'Order',
        tabName: '订单',
        component: Order
    },
    {
        icon: require('../icon/people.png'),
        selectedIcon: require('../icon/people_fill.png'),
        tabPage: 'My',
        tabName: '我的',
        component: My
    }
];
let navigation = null;
type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        navigation = this.props.navigation;
        this.state = {
            selectedTab: 'Home'
        }
    }

    render() {
        let tabViews = dataSource.map((item, i) => {
            return (
                <TabNavigator.Item
                    title={item.tabName}
                    selected={this.state.selectedTab === item.tabPage}
                    titleStyle={{color: 'black'}}
                    selectedTitleStyle={{color: '#26a2ff'}}
                    renderIcon={() => <Image style={styles.tabIcon} source={item.icon}/>}
                    renderSelectedIcon={() => <Image style={styles.tabIcon} source={item.selectedIcon}/>}
                    tabStyle={{alignSelf: 'center'}}
                    onPress={() => {
                        this.setState({selectedTab: item.tabPage})
                    }}
                    key={i}
                >
                    <item.component navigation={navigation}/>
                </TabNavigator.Item>
            );
        });
        return (
            <View style={styles.container}>
                <TabNavigator
                    hidesTabTouch={true}
                >
                    {tabViews}
                </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    tabIcon: {
        width: 23,
        height: 23,
    }
});